<template>
  <div class="users">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/layout' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/activecode' }"
        >活码管理</el-breadcrumb-item
      >
      <el-breadcrumb-item>新增活码</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-form ref="form" :model="form" label-width="150px">
        <el-form-item label="活码标题" prop="codename" required>
          <el-input v-model="form.codename"></el-input>
        </el-form-item>
        <el-form-item label="单个子码扫描阀值" prop="restrictedmode" required>
          <el-input v-model="form.restrictedmode"></el-input>
        </el-form-item>
        <el-form-item label="显示模式" prop="displaymode" required>
          <el-radio-group v-model="form.displaymode">
            <el-radio :label="true">逐个显示模式</el-radio>
            <el-radio :label="false">随机显示模式</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="显示限制" prop="displaylimit" required>
          <el-radio-group v-model="form.displaylimit">
            <el-radio :label="true">一个ip显示同一个</el-radio>
            <el-radio :label="false">每个刷新都不一样</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="显码模式" prop="mode" required>
          <el-radio-group v-model="form.mode">
            <el-radio :label="(mode = 'url')">跳转模式</el-radio>
            <el-radio :label="(mode = 'json')">账号显示</el-radio>
            <el-radio :label="(mode = 'html')">客服模式</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="子码类型" prop="mode" required>
          <el-radio-group v-model="form.types">
            <el-radio :label="(types = 'qq')">QQ</el-radio>
            <el-radio :label="(types = 'wx')">微信</el-radio>
            <el-radio :label="(types = 'wxgzh')">公众号</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addactivecode">立即提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
//深拷贝
import _ from "lodash";
import { addqrcode } from "../axios/api";
export default {
  data() {
    return {
      dialogVisible: false, //控制模态框的显示隐藏
      form: {
        codename: "",
        displaymode: true,
        restrictedmode: 100,
        displaylimit: true,
        mode: "url",
        types: "qq",
      },
    };
  },
  created() {},
  methods: {
    //新增活码
    addactivecode() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          const result = _.merge(this.form);
          result.restrictedmode = Number(result.restrictedmode);
          const res = await addqrcode(result);
          if (res.status == 201) {
            this.$message.success("新增活码成功");
            this.$router.push("/activecode");
          } else {
            this.$message.error("新增活码失败");
          }
        } else {
          return this.$message.error("请输入合法的数据");
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
</style>